<template>
  <div class="subscription">
    <div class="subscription-header">
      <div class="title color-1">订购Versuspk，既可增值</div>
      <div class="balance">
        <div>账户余额: </div>
        <div class="available">
          <div class="usdt">
            {{assetsUSDT.available || 0}} USDT
            <div class="balance-cube" @click="onRecharge" :data-clipboard-text="userIfo.userid">充值</div>
          </div>
          <div class="usdt">{{assetsVERSUSPK.available}} Versuspk
            <div class="balance-cube" @click="onNavigateTo('/transfer?available='+ assetsVERSUSPK.available)" :data-clipboard-text="userIfo.userid">转账</div>
          </div>
        </div>
      </div>
      <div class="btn db-flex color-2">
        <div
          class="btn-left color-block-2"
          hover-class="db-btn-hover"
          @click="onNavigateTo('/explain')"
        >抢购说明</div>
        <div class="btn-right color-block-2" hover-class="db-btn-hover" @click="addEvent">抢购提醒</div>
      </div>
    </div>
    <div class="subscription-body">
      <div class="progress">
        <div class="progress-title">
          第上期已售馨，距离下次限时抢购倒计时:
          <countdown :day="day" :hour="hour" :minute="minute" :second="second"></countdown>
        </div>
        <div class="progress-wrap">
          <!-- <progress percent="40" activeColor="#0065cc" active stroke-width="8" /> -->
        </div>
      </div>
      <div class="table color-block-2">
        <div
          v-for="(item, index) in tableList"
          :key="index"
          class="tr db-flex"
          :class="{ 'no-border-bottom': index == 2 }"
        >
          <div class="td font-22">{{ item.id | itemName }}</div>
          <div class="td font-22">1Versuspk</div>
          <div class="td font-22">-</div>
          <div class="td font-22">{{ item.price }}</div>
          <div class="td no-border-right font-22">USDT</div>
        </div>
      </div>
      <div class="money db-flex">
        <div
          v-for="(item, index) in moneyList"
          :key="index"
          class="money-item font-w500"
          :class="{ active: moneyActive === index }"
          @click="onMoney(index)"
        >{{ item }}USDT</div>
      </div>
      <div class="buyBtn">
        <div class="buyBtn-wrap">
          <van-button :loading="loading" @click="onSubmit" type="info" size="large">立即购买</van-button>
        </div>
        <div class="estimated color-3">
          预计可获得
          <span class="color-6">{{ moneyList[moneyActive] / tableList[0].price | estimated }}</span> Versuspk，抢购结果以具体公告分配系数结果为准
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countdown from "./countdown";
import Clipboard from "clipboard";
import { getAssets, getDtpanicbuy, buySubscription } from "../../api/interface";
export default {
  name: "Home",
  components: {
    countdown
  },
  data() {
    return {
      assetsUSDT: {},
      assetsVERSUSPK: {},
      time: "",
      userIfo: this.$session.get(),
      moneyActive: 0,
      moneyList: [1500, 500, 150, 100],
      loading: false,
      tableList: [],
      day: 0,
      hour: 0,
      minute: 0,
      second: 0
    };
  },
  filters: {
    itemName(val) {
      switch (val) {
        case 1:
          return "本期";
        case 2:
          return "下期";
        case 3:
          return "当前价格";
        default:
          break;
      }
    },
    estimated(val) {
      if (val) {
        return val.toFixed(2);
      }
      return "--";
    }
  },
  computed: {},
  created() {
    this.$toast.loading({
      mask: true,
      message: "加载中..."
    });
    this.getAssets();
    this.getDtpanicbuy();
  },
  methods: {
    getDtpanicbuy() {
      getDtpanicbuy()
        .then(res => {
          this.time = res[1].time;
          this.setTiem(res[1].time);
          this.tableList = res;
          this.$toast.clear();
        })
        .catch(() => {
          this.$toast.clear();
        });
    },
    getAssets() {
      getAssets({ userId: this.$session.get().userid, coinId: "DB-USDT" })
        .then(res => {
          this.assetsUSDT = res;
        })
        .catch(() => {});
      getAssets({ userId: this.$session.get().userid, coinId: "DB-VERSUSPK" })
        .then(res => {
          this.assetsVERSUSPK = res;
        })
        .catch(() => {});
    },
    onSubmit() {
      this.$dialog.confirm({
        message: `确认使用${this.moneyList[this.moneyActive]}USDT进行抢购？`,
        beforeClose: (action, done) => {
          if (action === "confirm") {
            const time = this.time.replace(/\-/g, "/");
            const date1 = new Date(time).getTime() / 1000;
            const date2 = +new Date() / 1000;
            if (date1 > date2) {
              this.$toast("抢购未开始");
              done();
              return;
            }
            buySubscription({
              userId: this.$session.get().userid,
              num: this.moneyList[this.moneyActive],
              price: this.tableList[0].price
            })
              .then(res => {
                done();
                this.assets.available -= this.moneyList[this.moneyActive];
                this.$toast.$success("抢购成功");
              })
              .catch(() => {
                done();
              });
          } else {
            done();
          }
        }
      });
    },
    onMoney(index) {
      this.moneyActive = index;
    },
    addEvent() {
      this.$dialog
        .confirm({
          title: "抢购提醒",
          message: "请在手机上设置提醒事项或闹钟，以免错过抢购最佳时间！",
          showCancelButton: false,
          confirmButtonText: "知道了"
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    setTiem(time) {
      time = time.replace(/\-/g, "/");
      const date1 = new Date(time).getTime() / 1000;
      const date2 = +new Date() / 1000;
      const date3 = date1 - date2;
      const leave1 = date3 % (24 * 3600); //时数
      const leave2 = leave1 % 3600; // 分数
      const leave3 = leave2 % (60 * 1000); //毫秒数

      this.day = Math.floor(date3 / (3600 * 24));
      this.hour = Math.floor(leave1 / 3600);
      this.minute = Math.floor(leave2 / 60);
      this.second = Math.round(leave3 / 1000);
    },
    onRecharge() {
      let isClipboard = true;
      let clipboard = new Clipboard(".balance-cube");
      clipboard.on("success", e => {
        isClipboard = true;
        e.clearSelection();
      });
      clipboard.on("error", () => {
        isClipboard = false;
        clipboard.destroy();
      });
      this.$dialog
        .confirm({
          title: "USDT充值地址",
          message: `${this.userIfo.userid}\n充值成功后预计10分钟内到账，刷新页面查看余额`,
          confirmButtonText: "复制地址"
        })
        .then(() => {
          if (isClipboard) {
            this.$toast("复制成功");
            return;
          }
          this.$toast("复制失败，请手动复制");
        })
        .catch(() => {});
    },
    onNavigateTo(url) {
      this.$router.push({ path: url });
    }
  }
};
</script>
<style lang="scss" scoped>
.subscription {
  min-height: 100vh;
  padding: 0.2rem 0.15rem;
  background-color: #fff;
  &-header {
    .title {
      margin-bottom: 0.4rem;
      font-size: 0.24rem;
      font-weight: 600;
      text-align: center;
    }
    .balance {
      display: flex;
      margin-bottom: 0.4rem;
      font-size: 0.16rem;
      .available {margin-left: .05rem; font-size: .14rem; font-weight: 600}
      .usdt {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
      }
      &-cube {
        position: relative;
        padding: 0 7px;
        font-size: 0.1rem;
        line-height: 20px;
        display: block;
        margin-left: 10px;
        border-radius: 3px;
        text-align: center;
        color: #1399ea;
        border: 1px solid rgba(14, 131, 247, 0.36);
        font-family: Helvetica Neue, Arial, sans-serif;
      }
    }
    .btn {
      justify-content: space-around;
      &-left,
      &-right {
        width: 1.5rem;
        height: 0.35rem;
        line-height: 0.35rem;
        font-size: 0.12rem;
        text-align: center;
        border-radius: 0.7rem;
      }
    }
  }
  &-body {
    .progress {
      &-title {
        margin: 0.2rem 0;
        font-size: 0.14rem;
      }
      &-wrap {
        border-radius: 0.1rem;
        overflow: hidden;
      }
    }
    .table {
      border-radius: 0.1rem;
      overflow: hidden;
      .tr {
        justify-content: space-between;
        text-align: center;
        border-bottom: 1px dashed #fff;
        &.no-border-bottom {
          border-bottom: none;
        }
        .td {
          width: calc(100% / 4);
          height: 0.3rem;
          line-height: 0.3rem;
          font-size: 0.1rem;
          color: #fff;
          border-right: 1px dashed #fff;
          &.no-border-right {
            border-right: none;
          }
        }
      }
    }
    .money {
      justify-content: space-between;
      margin: 0.15rem 0;
      color: #fff;
      &-item {
        padding: 0.05rem 0.1rem;
        font-size: 0.12rem;
        border-radius: 0.05rem;
        background-color: #7ab3ea;
        border-color: #51779c;
        &.active {
          background-color: #1399ea;
          border-color: #1399ea;
        }
      }
    }
    .buyBtn {
      margin: 0.4rem 0;
      .estimated {
        margin-top: 0.1rem;
      }
      &-wrap {
        font-size: 0.1rem;
        border-radius: 0.1rem;
        overflow: hidden;
      }
    }
    .estimated {
      font-size: 0.12rem;
      span {
        font-weight: 600;
      }
    }
  }
}
</style>
